<template>
  <div class="setForm">
    <a-button type="primary" @click="showList = true">
      编辑内容
    </a-button>
    <a-modal :visible="showList" title="编辑栏目" @cancel="showList = false" :width="1100" @ok="showList = false" okText="确定" cancelText="取消">
      <div class="list acea-row row-middle" v-for="(item,index) in list" :key="index" >
        <div class="item acea-row row-middle">
          标题：<a-input v-model="item.title" style="width: 120px" />
        </div>
        <div class="item acea-row row-middle">
          标识：<a-input v-model="item.name" style="width: 120px" />
        </div>
        <div class="item acea-row row-middle">
          类型：
          <a-select :default-value="item.type?item.type:'form-input'" v-model="item.type" style="width: 120px" >
            <a-select-option value="form-input">输入框</a-select-option>
            <a-select-option value="form-radio">单选框</a-select-option>
            <a-select-option value="form-checkbox">多选框</a-select-option>
          </a-select>
        </div>
        <div class="item acea-row row-middle" v-if="item.type == 'form-input'">
          提示值：<a-input v-model="item.placeholder" style="width: 120px" />
        </div>
        <div class="item acea-row row-middle" v-if="item.type == 'form-input'">
          默认内容：<a-input v-model="item.value" style="width: 120px" />
        </div>
        <div class="item acea-row row-middle" v-if="item.type == 'form-radio'">
          选项值：
          <template v-for="(tag, index) in item.tags">
            <a-tag :key="tag" closable @close="() => item.tags = handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <a-input
            v-if="inputVisible"
            ref="input"
            type="text"
            size="small"
            :style="{ width: '78px' }"
            :value="inputValue"
            @change="handleInputChange"
            @blur="handleInputConfirm(item)"
            @keyup.enter="handleInputConfirm(item)"
          />
          <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
            <a-icon type="plus" /> 选项
          </a-tag>
        </div>
        <div class="item acea-row row-middle" v-if="item.type == 'form-checkbox'">
          选项值：
          <template v-for="(tag, index) in item.tags">
            <a-tag :key="tag" closable @close="() => item.tags = handleClose2(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <a-input
            v-if="inputVisible2"
            ref="input2"
            type="text"
            size="small"
            :style="{ width: '78px' }"
            :value="inputValue2"
            @change="handleInputChange2"
            @blur="handleInputConfirm2(item)"
            @keyup.enter="handleInputConfirm2(item)"
          />
          <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput2">
            <a-icon type="plus" /> 选项
          </a-tag>
        </div>
        <a-icon :type="index==0?'plus-circle':'minus-circle'" class="list-icon" @click="handle(index)" />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name:"setForm",
  props:{
    list:{
      type:Array,
      default:[],
    }
  },
  data() {
    return {
      showList:false,
      inputVisible: false,
      inputValue: '',
      taglist:[],
      inputVisible2: false,
      inputValue2: '',
      taglist2:[]
    }
  },
  methods: {
    handle(idx){
      if(idx == 0){
        let obj = {
          type:"form-input",
          title:"",
          value:"",
          checkValue:[],
          placeholder:"",
          tags:[]
        }
        this.list.push(obj)
      }else{
        this.list.splice(idx,1)
      }
    },
    handleClose(removedTag) {
      const tags = this.taglist.filter(tag => tag !== removedTag);
      return tags
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function() {
        this.$refs.input[0].focus();
      });
    },
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    handleInputConfirm(item) {
      const inputValue = this.inputValue;
      let taglist = this.taglist;
      if (inputValue && taglist.indexOf(inputValue) === -1) {
        taglist = [...taglist, inputValue];
      }
      item.tags = taglist
      Object.assign(this, {
        taglist,
        inputVisible: false,
        inputValue: '',
      });
    },
    handleClose2(removedTag) {
      const tags = this.taglist2.filter(tag => tag !== removedTag);
      return tags
    },
    showInput2() {
      this.inputVisible2 = true;
      this.$nextTick(function() {
        this.$refs.input2[0].focus();
      });
    },
    handleInputChange2(e) {
      this.inputValue2 = e.target.value;
    },
    handleInputConfirm2(item) {
      const inputValue2 = this.inputValue2;
      let taglist2 = this.taglist2;
      if (inputValue2 && taglist2.indexOf(inputValue2) === -1) {
        taglist2 = [...taglist2, inputValue2];
      }
      item.tags = taglist2
      Object.assign(this, {
        taglist2,
        inputVisible2: false,
        inputValue2: '',
      });
    },
  },
}
</script>

<style scoped>
  .list{
    margin-bottom: 20px;
  }
  .item{
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-left: 20px;
  }
  .list-icon{
    font-size:18px;
    margin-left: 20px;
    cursor: pointer;
  }
</style>